<template>
  <div class="container">
    <div class="coupon-wrap list">
      <coupon :coupon="couponData" :messageIds="messageIds" v-if="couponData.couponType" :showExpend="myCoupon" :btntype="1" :actionId="actionId"></coupon>
      <div class="coupon-explain" v-if="couponData.couponType === 10">以下商品可使用￥{{couponData.cashAmount}}代金券</div>
      <div class="coupon-explain" v-if="couponData.couponType === 20">以下商品可使用满{{couponData.fullAmount}}元减￥{{couponData.reduceAmount}}元优惠券</div>
      <div class="coupon-explain" v-if="couponData.couponType === 30">以下商品可使用满{{couponData.fullAmount}}元打{{couponData.discountPercent}}折优惠券</div>
    </div>
    <div class="coupon-goods">
      <van-sticky>
        <div class="sort-bar">
          <div class="flex flex-center tabs-bar">
            <div class="flex flex-center flex-item height-50 bar-left" @click="setSort(0)">
              <div class="mar-r-4" :class="sortIndex===0?'tab-on':'tab-off'">价格</div>
              <img v-if="fileSpace && listQuery.sellPriceFlag===''" mode="widthFix" class="width-9 height-12"
                :src="fileSpace + '/images/goods-arrow3.png'"/>
              <img v-if="fileSpace && listQuery.sellPriceFlag===1" mode="widthFix" class="width-9 height-12"
                :src="fileSpace + '/images/goods-arrow1.png'"/>
              <img v-if="fileSpace && listQuery.sellPriceFlag===0" mode="widthFix" class="width-9 height-12"
                :src="fileSpace + '/images/goods-arrow2.png'"/>
            </div>
            <div class="flex flex-center flex-item height-50 bar-right" :class="sortIndex===1?'tab-on':'tab-off'" @click="setSort(1)">
              分类
            </div>
          </div>
          <div class="category" :class="{'expend': categroyExpend}" catchtouchmove="true">
            <div class="category-list">
              <div class="list-item" :class="{'item-active': categoryIndex === index}" v-for="(item, index) in categroyList" :key="index" @click="categoryClick(item, index)">{{item.categoryName}}</div>
            </div>
          </div>
        </div>
      </van-sticky>
      <div class="goods">
        <div class="goods-list">
          <div class="goods-wrap" v-for="(item, index) in goodsList" :key="index" @click="pageTo(item)">
            <div v-if="item.income && (item.income * 1) > 0 && getCustomerId" class="income-wrap v-align-c">
              <div class="income-label">{{getAppInfo.commissionAlias || '分销赚'}}</div>
              <div class="income-value">{{item.income}}元</div>
            </div>
            <div class="width-167 height-164">
              <!-- 跨境图标 -->
              <div class="cross-border-pic">
                <!-- 跨境保税 -->
                <img
                  v-if="fileSpace && item.crossBorderType === 2 && item.crossBorderLabelType === 1"
                  :src="fileSpace + '/images/icon-cross-border.png'"
                  class="icon-cross-border"
                  alt="">
                <!-- 海外直邮 -->
                <img
                  v-if="fileSpace && item.crossBorderType === 2 && item.crossBorderLabelType === 2"
                  :src="fileSpace + '/images/icon-cross-border-22.png'"
                  class="icon-cross-border"
                  alt="">
              </div>
              <img v-if="item.mainImage" :src="item.mainImage" alt="" class="width-167 height-164">
            </div>
            <div class="goods-content pad-l-10 pad-r-10 pad-t-6">
              <div class="goods-title line-2 font-12">{{item.title}}</div>
              <div class="price-row flex flex-between mar-t-5">
                <div class="price-wrap">
                  <span class="font-10 pad-t-1">￥</span>
                  <span
                    class="font-14 price-short">{{ item.bestPrice }}</span>
                </div>
                <div class="height-32">
                  <div
                    @click.stop.prevent="showCart(item)"
                    :style="{color:getAppInfo.style.color5, background:getAppInfo.style.color2}"
                    class="in-cart-btn font-14">加入购物车</div>                
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="pad-10 mar-t-30 align-c" v-if="nodata">
          <img v-if="fileSpace" mode="widthFix" class="width-153 height-75 nodata-img"
              :src="fileSpace + '/images/2-0-kong.png'"/>
          <div class="pad-t-20 font-14 font-gray">空空如也</div>
        </div>
      </div>
    </div>
    <div class="foot-cart flex flex-between">
      <div class="content flex-item">
        <div class="flex flex-center">
          <van-icon class="mar-t--4" name="shopping-cart-o" size="22px" color="#999999" />
          <div class="font-13 mar-l-6">购物车<span v-if="cartBadge !== 0">({{cartBadge}})</span></div>
        </div>
        <div class="font-12 color-price">￥<span class="font-18">{{totalPrice}}</span></div>
      </div>
      <div
        class="go-cart"
        :style="{backgroundColor: globalStyle.color2, color: globalStyle.styleType === 10 ? globalStyle.color5 : '#fff'}"
        @click="$pt.switchTab({url: '/pages/shop/cart/main'})">去购物车</div>
    </div>
    <div class="mask" :class="{'mask-active': categroyExpend}" :style="'min-height:calc(100vh - ' + (categroyExpend ? couponWrapHight : '100vh') + ');'" catchtouchmove="true"    @click="categroyExpend = !categroyExpend"></div>
    <!--sku选择-->
    <get-sku-buy ref="getSkuBuy" :goodsType="goodsType" :room_id="room_id" :styleColor="globalStyle"
      :goodsData="goods" :skuPropList="skuPropList" :skuList="skuList" :values="values" :featuresType ="featuresType"
      @finished="getSkuBuyFinished" @close="getSkuBuyClose"></get-sku-buy>
  </div>
</template>
<script>
import { pageCouponGoods, listOneCategory, getCoupon } from '@/api/personal'
import GetSkuBuy from '@/components/GetSkuBuy'
import { getProjectGoodsSku, addShoppingCart, getShopCartVeekray } from '@/api/shop'
import { setCartBadge } from '@/utils/auth'
import Coupon from '@/components/Coupon'
import { listEnterpriseMessageConfig } from '@/api/common'
export default {
  components: { GetSkuBuy, Coupon },
  data() {
    return {
      effectiveList: [],
      feeGoodsList: [],
      groupBuyGoodsList: [],
      promotionList: [],
      listQueryCart: {
        memberId: '',
        customerId: '',
        enterpriseId: ''
      }, // 获取购物车列表信息 参数集合
      expend: false,
      categroyExpend: false,
      sortIndex: 0,
      categoryIndex: 0,
      params: { // 获取适用商品分页请求参数
        currentPage: 1,
        size: 10,
        couponId: '',
        memberId: '',
        customerMemberId: ''
      },
      listQuery: {
        sellPriceFlag: ''
      },
      pullLoad: { // 触底加载参数
        finished: false
      },
      doReceiveParams: { // 领取优惠券请求参数
        couponId: '',
        customerMemberId: '',
        actionId: ''
      },
      couponId: '',
      actionId: '',
      goodsList: [],
      categroyList: [],
      couponData: {},
      nodata: false,
      myCoupon: false,
      goodsType: '',
      room_id: null,
      goods: {},
      skuPropList: [],
      skuList: [],
      values: [],
      fastGoods: [],
      cartBadge: 0,
      priceLength: 0,
      goodsLoad: 0,
      messageIds: [],
      globalStyle: {},
      getAppInfo: {},
      featuresType: ''
    }
  },
  computed: {
    couponWrapHight() {
      let query = wx.createSelectorQuery()
      let height = 0
      query.select('.coupon-wrap').boundingClientRect()
      // query.selectViewport().scrollOffset()
      query.exec((res) => {
        height = res[0].height // 获取list高度
      })
      return height + 'px'
    },
    totalPrice() {
      let price = '0.00'
      this.cartBadge = 0
      this.goodsList.forEach(item => {
        let index = this.fastGoods.findIndex(listItem => {
          return listItem.goodsId === item.goodsId
        })
        if (index !== -1) {
          price = parseFloat(this.fastGoods[index].totalSellPrice * 1 + price * 1).toFixed(2)
          this.cartBadge += this.fastGoods[index].goodsNum
        }
      })
      return price
    }
  },
  onLoad() {
    // 初始化data
    Object.assign(this.$data, this.$options.data())
  },
  mounted() {
    this.getAppInfo = this.$pt.getStorageSync('appInfo')
    this.globalStyle = this.getAppInfo.style
    if (!this.getShowBuyCard) return
    this.couponId = this.getCurrentPage().query.couponId
    this.actionId = this.getCurrentPage().query.actionId
    this.params.couponId = this.getCurrentPage().query.couponId
    this.params.customerMemberId = this.getCustomerId
    this.params.memberId = this.getMemberId
    if (this.getCurrentPage().query.myCoupon) {
      this.myCoupon = true
    }
    this.getCoupon()
    this.pageCouponGoods()
    this.listOneCategory()
    this.getShopCartVeekray()
  },
  onPullDownRefresh() {
    // 下拉刷新
    this.resetPageParams()
    this.getCoupon()
    // this.pageCouponGoods()
    this.listOneCategory()
    this.getShopCartVeekray()
    setTimeout(() => {
      this.$pt.stopPullDownRefresh()
    }, 500)
  },
  onReachBottom() {
    // 触底刷新
    if (!this.pullLoad.finished) {
      this.pageCouponGoods()
    }
  },
  methods: {
    resetFastGoodsPrice() {
      this.fastGoods.forEach(itemGoods => {
        if (itemGoods.skuFlag) {
          // 多规格
          let totalSellPrice = null
          itemGoods.skuList.forEach(item => {
            totalSellPrice += Math.round((item.goodsNum * item.bestPrice) * 100) / 100
          })
          itemGoods.totalSellPrice = (Math.round(totalSellPrice * 100) / 100).toFixed(2)
        } else {
          // 单规格
          let totalSellPrice = null
          totalSellPrice = (Math.round((itemGoods.goodsNum * itemGoods.bestPrice) * 100) / 100).toFixed(2)
          itemGoods.totalSellPrice = totalSellPrice
        }
      })
    },
    getShopCartVeekray() {
      this.effectiveList = []
      this.groupBuyGoodsList = []
      this.listQueryCart.memberId = this.getMemberId
      this.listQueryCart.customerId = this.getCustomerId
      this.listQueryCart.enterpriseId = this.getEnterpriseId || ''
      getShopCartVeekray(this.listQueryCart).then(response => {
        if (response.isError) return
        this.feeGoodsList = []
        this.effectiveList = response.data.effectiveList
        this.groupBuyGoodsList = response.data.groupBuyGoodsList
        this.promotionList = response.data.promotionList
        if (this.promotionList.length) {
          this.promotionList.forEach(item => {
            if (item.feeGoodsList) {
              item.feeGoodsList.forEach(itemSub => {
                this.feeGoodsList.push(itemSub)
              })
            }
          })
        }
        // 设置快速购买缓存数据，以及购物车角标展示
        this.dataFastEls(response.data)
      }).catch(() => {
      })
    },
    dataFastEls(data) {
      this.fastGoods = []
      let storeHomeGoodsList = []
      if (data.storeHomeGoodsList) {
        storeHomeGoodsList = data.storeHomeGoodsList
      }
      let tempAllList = []
      tempAllList = tempAllList.concat(this.effectiveList, this.feeGoodsList, this.groupBuyGoodsList, storeHomeGoodsList)
      if (tempAllList.length) {
        tempAllList.forEach(item => {
          // 重新获取快速购买数据
          if (item.skuId) {
            // 多规格
            let skuData = []
            let objSkuData = {
              skuId: item.skuId,
              goodsNum: item.goodsNum,
              bestPrice: item.bestPrice
            }
            skuData.push(objSkuData)
            let goodsNum = null
            skuData.forEach(item => {
              goodsNum += item.goodsNum
            })
            this.fastGoods.push({
              goodsId: item.goodsId,
              skuFlag: 1,
              skuList: skuData,
              goodsNum: goodsNum
            })
          } else {
            // 单规格
            let objFastGoods = {
              goodsId: item.goodsId,
              skuFlag: 0,
              goodsNum: item.goodsNum,
              bestPrice: item.bestPrice
            }
            this.fastGoods.push(objFastGoods)
          }
        })
      }
      let map = {}
      let dest = []
      this.fastGoods.forEach(item => {
        if (!map[item.goodsId]) {
          if (item.skuFlag) {
            dest.push({
              goodsId: item.goodsId,
              goodsNum: item.goodsNum,
              skuFlag: 1,
              skuList: item.skuList
            })
          } else {
            let objDest = {
              goodsId: item.goodsId,
              goodsNum: item.goodsNum,
              skuFlag: 0,
              bestPrice: item.bestPrice
            }
            dest.push(objDest)
          }
          map[item.goodsId] = item
        } else {
          dest.forEach(itemSub => {
            if (itemSub.goodsId === item.goodsId) {
              itemSub.goodsNum = itemSub.goodsNum + item.goodsNum
              if (item.skuFlag) {
                itemSub.skuList = itemSub.skuList.concat(item.skuList)
              }
            }
          })
        }
      })
      this.fastGoods = []
      this.fastGoods = dest
      this.resetFastGoodsPrice()
    },
    messageConfig() {
      this.messageIds = []
      const dataArr = ['1401', '1402']
      let dataStr = dataArr.toString()
      listEnterpriseMessageConfig({
        memberId: this.getMemberId,
        ascriptionTypes: dataStr
      }).then((response) => {
        if (response.isError) return
        response.data.forEach(item => {
          if (item.miniMadeId) {
            this.messageIds.push(item.miniMadeId)
          }
        })
      }).catch(() => {
      })
    },
    getCoupon() {
      this.messageConfig()
      // 获取 优惠券 详情信息
      let params = {
        couponId: this.couponId,
        customerMemberId: this.getCustomerId,
        actionId: this.actionId,
        memberCouponId: this.getCurrentPage().query.memberCouponId || ''
      }
      getCoupon(params).then(response => {
        if (response.isError) return
        let resData = response.data
        switch (resData.couponType) {
          case 10:
            // resData.cashAmount = '11975.12'
            resData.cashAmount = parseFloat(resData.cashAmount)
            resData.cashPriceLength = resData.cashAmount.toString().length
            break
          case 20:
            // resData.reduceAmount = '12929.21'
            resData.reduceAmount = parseFloat(resData.reduceAmount)
            resData.reducePriceLength = resData.reduceAmount.toString().length
            break
          case 30:
            resData.discountPercent = parseFloat(resData.discountPercent)
            break
          default:
            break
        }
        if (resData.validTimeType === 1 || this.myCoupon) {
          resData.validStartTime = resData.validStartTime.split(' ')[0]
          resData.validEndTime = this.isToday(resData.validEndTime)
        }
        this.couponData = resData
      }).catch(() => {
      })
    },
    pageCouponGoods() {
      // 获取商品列表
      pageCouponGoods(this.params).then(response => {
        if (response.isError) return
        if (response.data.total === 0) {
          // 如果数据为空，直接return
          this.pullLoad.finished = true
          this.nodata = true
          return
        }
        response.data.records.forEach(item => {
          item.goodsType = 30
          if (item.totalLimitNum) {
            item.groupLimitNum = item.totalLimitNum
          } else {
            item.groupLimitNum = item.stock
          }
          const limitNumData = item.groupLimitNum
          this.$delete(item, 'groupLimitNum')
          this.$set(item, 'groupLimitNum', limitNumData)
          this.goodsList.push(item)
        })
        this.params.currentPage++
        if (this.goodsList.length === 0 || this.goodsList.length >= response.data.total) {
          this.pullLoad.finished = true
        }
      }).catch(() => {
      })
    },
    getSkuBuyClose() {
    },
    getSkuBuy(isCart, item) {
      if (this.getCustomerId) {
        if (this.shareMemberId) {
          item.shareMemberId = this.shareMemberId
        }
        const comissionFlag = this.getCurrentPage().query.comissionFlag
        this.$refs.getSkuBuy.show(item, isCart, comissionFlag, item.qty)
      }
    },
    getSkuBuyFinished(params) {
      // console.log('getSkuBuyFinished 11', params.goodsNum)
      this.goodsList.forEach(item => {
        if (params.goodsId === item.goodsId) {
          let addCount = 0
          if (item.goodsNum) {
            addCount = item.goodsNum + params.goodsNum
          } else {
            addCount = params.goodsNum
          }
          item.goodsNum = addCount
          this.cartBadgeEls(1, item, params)
        }
      })
      this.resetFastGoodsPrice()
      this.totalCartBadge(params.goodsNum)
    },
    getProjectGoodsSku(item) {
      this.goods = this.$utils.deepClone(item)
      this.$utils.showToast({
        title: '加载中',
        icon: 'loading'
      })
      getProjectGoodsSku({
        goodsId: item.goodsId,
        customerId: this.getCustomerId,
        memberId: this.getMemberId,
        microShopFlag: item.goodsType === 30 || item.goodsType === 31 || item.goodsType === 32 ? 0 : 1
      }).then((response) => {
        if (response.isError) return
        this.$pt.hideToast()
        this.goods.skuPropList = response.data.skuPropList
        this.goods.skuList = response.data.skuList
        this.goods.values = response.data.values
        // 社区团购商品，设置featuresType为11
        this.featuresType = ''
        if (item.activityTypeLabel === '团购' || item.activityType === 11) {
          this.featuresType = 11
        }
        this.skuPropList = response.data.skuPropList
        this.skuList = response.data.skuList
        this.values = response.data.values
        setTimeout(() => {
          this.getSkuBuy(true, this.goods)
        }, 100)
      }).catch(() => {
      })
    },
    showCart(item) {
      // 自营商品快速购买，添加默认库存
      if (item.goodsType === 10) {
        item.stock = 1000
        const changeStock = item.stock
        this.$delete(item, 'stock')
        this.$set(item, 'stock', changeStock)
      }
      if (item.skuFlag === 1) {
        this.skuPropList = []
        this.skuList = []
        this.values = []
        this.goods = item
        this.goodsType = item.goodsType
        this.goods.bestPrice = item.bestPrice
        this.goods.images = []
        if (item.mainImage) {
          this.goods.images[0] = item.mainImage
        }
        if (item.firstImage) {
          this.goods.images[0] = item.firstImage
        }
        this.goods.isCart = true
        this.getProjectGoodsSku(item)
      } else {
        item.goodsNum = 1
        this.simpleSkuEls(item)
      }
    },
    simpleSkuEls(itemOne) {
      this.goodsLoad = 0
      this.goodsList.forEach(item => {
        if (itemOne.goodsId === item.goodsId) {
          item.goodsNum = itemOne.goodsNum
          this.goodsLoad++
          if (this.goodsLoad === 1) {
            this.addShoppingCart(1, itemOne)
          }
        }
      })
    },
    addShoppingCart(value, item) {
      this.addElsShoppingCart(value, item)
    },
    addElsShoppingCart(value, item) {
      const shoppingCart = {
        customerId: this.getCustomerId,
        goodsId: item.goodsId,
        goodsNum: value,
        memberId: this.getMemberId,
        goodsType: item.goodsType,
        shoppingCartType: item.goodsType === 30 || item.goodsType === 31 || item.goodsType === 32 ? 3 : 1
      }
      addShoppingCart(shoppingCart).then((response) => {
        if (response.isError) return
        this.cartBadgeEls(value, item)
        this.resetFastGoodsPrice()
        this.totalCartBadge(value)
      }).catch(() => {
      })
    },
    cartBadgeEls(value, item, params) {
      // 多规格类型
      if (params !== undefined) {
        // 多规格加、减数量缓存处理
        // console.log(params)
        if (this.fastGoods.length !== 0) {
          // 判段商品是否已经存在
          if (this.checkArrInclude(this.fastGoods, params.goodsId, 'goodsId')) {
            // 已存在goodsId商品
            this.fastGoods.forEach(itemGoods => {
              if (itemGoods.goodsId === params.goodsId) {
                // 已存在skuId商品
                if (this.checkArrInclude(itemGoods.skuList, params.skuId, 'skuId')) {
                  itemGoods.goodsNum = null
                  itemGoods.skuList.forEach(itemSku => {
                    if (itemSku.skuId === params.skuId) {
                      itemSku.goodsNum = itemSku.goodsNum + params.goodsNum
                      itemSku.bestPrice = params.bestPrice
                    }
                    itemGoods.goodsNum += itemSku.goodsNum
                  })
                } else {
                  let objSkuList = {
                    skuId: params.skuId,
                    goodsNum: params.goodsNum,
                    bestPrice: params.bestPrice
                  }
                  itemGoods.skuList.push(objSkuList)
                  itemGoods.goodsNum = null
                  itemGoods.skuList.forEach(itemSku => {
                    itemGoods.goodsNum += itemSku.goodsNum
                  })
                }
              }
            })
          } else {
            // 新增商品
            let skuData = []
            let objSkuData = {
              skuId: params.skuId,
              goodsNum: params.goodsNum,
              bestPrice: params.bestPrice
            }
            skuData.push(objSkuData)
            let goodsNum = null
            skuData.forEach(item => {
              goodsNum += item.goodsNum
            })
            this.fastGoods.push({
              goodsId: params.goodsId,
              skuFlag: 1,
              skuList: skuData,
              goodsNum: goodsNum
            })
          }
        } else {
          let skuData = []
          let objSkuData = {
            skuId: params.skuId,
            goodsNum: params.goodsNum,
            bestPrice: params.bestPrice
          }
          skuData.push(objSkuData)
          let goodsNum = null
          skuData.forEach(item => {
            goodsNum += item.goodsNum
          })
          let objFastGoods = {
            goodsId: params.goodsId,
            skuFlag: 1,
            skuList: skuData,
            goodsNum: goodsNum
          }
          this.fastGoods.push(objFastGoods)
        }
        return
      }
      // 单规格类型
      if (value === 1) {
        // 单规格加数量处理
        if (this.fastGoods.length !== 0) {
          // 判段商品是否已经存在
          if (this.checkArrInclude(this.fastGoods, item.goodsId, 'goodsId')) {
            // 已存在商品
            this.fastGoods.forEach(itemGoods => {
              if (itemGoods.goodsId === item.goodsId) {
                itemGoods.goodsNum = itemGoods.goodsNum + value
                itemGoods.bestPrice = item.bestPrice
              }
            })
          } else {
            // 新增商品
            let objData = {
              goodsId: item.goodsId,
              skuFlag: 0,
              goodsNum: item.goodsNum,
              bestPrice: item.bestPrice
            }
            this.fastGoods.push(objData)
          }
        } else {
          let objData = {
            goodsId: item.goodsId,
            skuFlag: 0,
            goodsNum: item.goodsNum,
            bestPrice: item.bestPrice
          }
          this.fastGoods.push(objData)
        }
      }
    },
    totalCartBadge(value) {
      let cartBadge = 0
      let badgeNum = this.$pt.getStorageSync('cartBadge') || 0
      console.log('totalCartBadge 11', badgeNum, value)
      cartBadge = Number(badgeNum) + Number(value)
      setCartBadge(cartBadge)
    },
    // 判断数组是否存在某个key值
    checkArrInclude(arr, item, keyName) {
      let arrData = []
      if (arr.length !== 0) {
        arr.forEach(item => {
          arrData.push(item[keyName])
        })
      }
      if (arrData.includes(item)) {
        return true
      } else {
        return false
      }
    },
    listOneCategory() {
      // 获取分类列表
      listOneCategory({couponId: this.couponId}).then(response => {
        if (response.isError) return
        this.categroyList = response.data
        // 新增 全部 分类
        this.categroyList.unshift({
          categoryName: '全部',
          childList: [],
          enterpriseCategoryId: ''
        })
      }).catch(() => {
      })
    },
    isToday(date) {
      let today = new Date().toLocaleDateString()
      let tsDate = date.split(' ')[0].replace(/-/g, '/')
      if (new Date(tsDate).getTime() === new Date(today).getTime()) return 'today'
      return date.split(' ')[0]
    },
    setSort(value) {
      this.sortIndex = value
      switch (this.sortIndex) {
        case 0:
          this.listQuery.sellPriceFlag = this.listQuery.sellPriceFlag ? 0 : 1
          this.categroyExpend = false
          this.params.sellPriceFlag = this.listQuery.sellPriceFlag
          this.resetPageParams()
          break
        case 1:
          this.listQuery.sellPriceFlag = ''
          this.categroyExpend = !this.categroyExpend
          break
        default:
          break
      }
    },
    resetPageParams() {
      // 将变量重置
      this.nodata = false
      this.params.currentPage = 1
      this.pullLoad.finished = false
      this.goodsList = []
      this.pageCouponGoods()
    },
    categoryClick(item, index) {
      // 商品分类选择事件
      this.categoryIndex = index
      this.categroyExpend = false
      this.params.enterpriseCategoryId = item.enterpriseCategoryId
      this.resetPageParams()
    },
    pageTo(item) {
      this.$pt.navigateTo({url: '/pages/shop/detail/main?goodsId=' + item.goodsId + '&goodsType=' + item.goodsType})
    }
  }
}
</script>
<style lang="less" scoped>
@light-orange: #FF593E;
@drak-orange: #EC3B1F;
.container{
  min-height: 100vh;
  background-color: white;
  position: relative;
  .coupon-wrap{
    padding: 15px 15px 0;
    background-color: #F5F5F5;
    position: relative;
    z-index: 9;
  }
  .list{
     &__item{
      width: 345px;
      border-radius: 8px;
      display: flex;
    }
    &__wrap{
      position: relative;
      width: 100%;
      min-height: 115px;
      // filter: drop-shadow(0px 0px 10px rgba(155, 155, 155, 0.11));
    }
    &__content{
      display: flex;
      width: 100%;
      height: 115px;
      background: radial-gradient(circle at right top, transparent 6px, #fff 0) top left / 105px 51% no-repeat,
        radial-gradient(circle at right bottom, transparent 6px, #fff 0) bottom left / 105px 51% no-repeat,
        radial-gradient(circle at left top, transparent 6px, #fff 0) top right / 241px 51% no-repeat,
        radial-gradient(circle at left bottom, transparent 6px, #fff 0) bottom right / 241px 51% no-repeat;
      // filter: drop-shadow(0px 0px 10px rgba(155, 155, 155, 0.11));
      border-radius: 8px;
      position: relative;
    }
    &__border{
      width: 4px;
      height: 115px;
      position: relative;
      left: 0;
      top: 0;
      background-color: @light-orange;
      overflow: hidden;
    }
    &__left{
      display: flex;
      border-radius: 8px 0 0 8px;
      overflow: hidden;
    }
    &__coupon-wrap{
      width: 94px;
      padding-right: 6px;
      height: 100%;
      color: @light-orange;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }
    &__arrow--bottom{
      position: absolute;
      bottom: 5px;
      right: 10px;
    }
    &__coupon-price{
      display: flex;
      align-items: flex-end;
    }
    &__price{
      font-size: 36px;
      font-weight: bold;
    }
    &__price-small{ 
      font-size: 32px;
    }
    &__right{
      padding: 0 10px 0 15px;
      height: 100%;
      display: flex;
      justify-content: space-between;
    }
    &__coupon-content{
      line-height: 1;
      height: 100%;
      width: 150px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
    }
    &__collect--no{
      width: 50px;
      height: 22px;
      line-height: 22px;
      background-color: @light-orange;
      color: #fff;
      font-size: 12px;
      text-align: center;
      margin-top: 30px;
      border-radius: 11px;
    }
    &__expend{
      background: white;
      margin-left: 4px;
      width: calc(100% - 4px);
      border-radius:  0 0 8px 8px;
      margin-top: -7px;
      height: 0px;
      overflow: hidden;
      line-height: 1;
      transition: all .5s;
      position: relative;
    }
    &__expend--true{
      height: auto;
      &::before{
        content: '';
        position: absolute;
        top: 7px;
        width: calc(100% - 28px);
        left: 14px;
        border-top: 0.5px dashed rgba(255, 89, 62, 0.5);
      }
    }
    &__ul{
      font-size: 12px;
      padding: 0 10px;
      line-height: 1;
      margin-top: 23px;
      li{
        display: flex;
        align-items: center;
        margin-bottom: 9.5px;
        &:last-child{
          margin-bottom: 13px;
        }
        .round-point{
          width: 3px;
          height: 3px;
          border-radius: 50%;
          background-color: #333333;
          margin-right: 5px;
        }
      }
    }
    .coupon-explain{
      padding: 15px 0 12px;
      line-height: 1;
      font-size: 12px;
    }
  }
  .coupon-goods{
    .sort-bar{
      position: relative;
      z-index: 9;
      height: 50px;
      .tabs-bar{
        height: 50px;
        background-color: white;
        color: #999999;
        border-bottom: .5px solid #eee;
        .tab-on{
          color: #333333;
          font-size: 14px;
        }
        .tab-off{
          color: #999999;
          font-size: 14px;
        }
        .bar-left{
          padding-left: 59px;
        }
        .bar-right{
          padding-right: 47px;
        }
      }
      .category{
        z-index: 9;
        position: absolute;
        width: calc(100% - 30px);
        left: 0;
        top: 47px;
        padding: 0 15px;
        background-color: white;
        height: 0px;
        overflow: hidden;
        .category-list{
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex-wrap: wrap;
          padding-bottom: 6.5px;
          .list-item{
            width: 76px;
            padding: 0 3px;
            box-sizing: border-box;
            height: 32px;
            text-align: center;
            border-radius: 16px;
            font-size: 12px;
            line-height: 32px;
            background-color: #F5F5F5;
            margin-right: calc((100% - 304px) / 3);
            margin-bottom: 10px;
            overflow:hidden;
            text-overflow:ellipsis;
            display:-webkit-box;
            -webkit-line-clamp:1;
            -webkit-box-orient:vertical;
            word-break:break-word;
            &:nth-child(4n+4){
              margin-right: unset;
            }
          }
          .item-active{
            background-color: #FFE200;
          }
        }
      }
      .expend{
        height: auto;
      }
    }
    .goods{
      // padding-top: 51px;
      padding-bottom: 49px;
      .goods-list{
        padding: 15px 15px 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        width: calc(100% - 30px);
        .goods-wrap{
          width: 167px;
          height: 251px;
          background-color: white;
          border-radius: 8px;
          box-shadow: 0 0 6px 1px rgba(93, 93, 93, 0.2);
          margin-right: calc(100% - 334px);
          margin-bottom: 15px;
          overflow: hidden;
          position: relative;
          &:nth-child(2n+2){
            margin-right: unset;
          }
          .income-wrap{
            position: absolute;
            left: 0;
            top: 5px;
            height: 18px;
            border-radius: 8px 0 8px 0;
            overflow: hidden;
            .income-label{
              background-color: #ff593e;
              font-size: 12px;
              color: white;
              line-height: 18px;
              padding: 0 5px;
            }
            .income-value{
              background-color: #f3f3f3;
              font-size: 14px;
              line-height: 18px;
              padding: 0 8px 0 2.5px;
            }
          }
          .goods-content{
            .price-row{
              .price-wrap{
                color: #FF593E;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                line-height: 1;
              }
            }
            .price-short{
              max-width: 45px;
              overflow:hidden;
              text-overflow:ellipsis;
              display:-webkit-box;
              -webkit-line-clamp:1;
              -webkit-box-orient:vertical;
              word-break:break-word;
            }
          }
        }
      }
    }
  }
  .foot-cart{
    position: fixed;
    height: 49px;
    width: 100%;
    background-color: white;
    left: 0;
    bottom: 0;
    box-shadow: 0 0 5px rgba(155, 155, 155, 0.15);
    .content{
      padding-left: 15px;
      padding-right: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .color-price{
        color: #FF593E;
      }
    }
    .go-cart{
      font-size: 16px;
      // background-color: #FFE200;
      height: 49px;
      line-height: 49px;
      width: 133.5px;
      text-align: center;
    }
  }
  .mask{
    height: 0;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.6);
  }
  .mask-active{
    height: 100%;
    min-height: calc(100vh - 220px);
  }
}
</style>
